<template>
<div>
 <div class="search">
        <input class="search-input" placeholder="输入城市名或拼音" 
        v-model="keyword"
        />
    </div>
 <div class="search-content" ref="search" v-show="keyword">
            <ul >
                <li class="search-item" v-for="(item,index) of list" :key="index" @click="handleClickCity(item.name)">{{item.name}}</li>
                <li class="search-item" v-show="hasNodata"> 没有找到匹配数据</li>
            </ul>
        </div>
</div>
</template>
<script>
import Bscroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
    name:'CitySearch',
    props:{
        cities:{
            type:Object
        }
    },
    components:{

    },
    computed:{
        hasNodata(){
            return !this.list.length
        }
    },
    data(){
        return{
            keyword:'',
            list:[],
            timer:null
        }
    },
    watch:{
        keyword () {
            if (this.timer) {
                clearTimeout(this.timer)
            }
            if (!this.keyword) {
                this.list = []
                return
            }
            this.timer = setTimeout(()=>{
                const result =[]
                for(let i in this.cities){
                    this.cities[i].forEach((value)=>{
                        if (value.name.indexOf(this.keyword) > -1 ) {
                            result.push(value)
                        }
                    })
                }
                this.list = result
            },100)

        }
    },
    mounted(){
        this.scroll = new Bscroll(this.$refs.search)
    },
   
    methods:{
       handleClickCity(city){//修改vuex
        //   this.$store.dispatch('changeCity',city)
        //   this.$store.commit('changeCity',city)
          this.changeCity(city)
          this.$router.push('/')
      },
      ...mapMutations(['changeCity'])
    }

}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.search 
    padding .1rem
    background $bgColor
    .search-input
        box-sizing border-box
        width 100%
        height .62rem
        padding .1rem
        line-height .62rem
        color #666
        text-align center
        border-radius .1rem
.search-content
    z-index 1
    overflow hidden
    position absolute
    top 1.68rem
    left 0
    right 0
    bottom 0
    background #eeeeee
    .search-item
        line-height .62rem
        padding-left .2rem
        background #ffffff
        border-bottom #e2e2e2
        color #666


</style>